<template>
  <page-layout title="供应商">
    <a-card>
      <div class="wrapper">
        <a-row>
          <a-col :span="12">
            <a-form :model="iptform" ref="iptform" layout="inline">
              <a-form-item label="供应商">
                <a-input allow-clear placeholder="请输入供应商名称" v-model="iptform.supplierName" />
              </a-form-item>
              <a-form-item label="城市">
                <Vcity class="supplier_cityTem" before="" :citydata="cityData" @selectDepCityFn="selectDepCity" />
              </a-form-item>
              <a-form-item>
                <a-space>
                  <a-button type="primary" @click="searchBtnClkFn" icon="search">查询</a-button>
                </a-space>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :span="12" class="addBtn_wrapper">
            <a-space>
              <a-button type="primary" @click="addSupplierBtnClkFn">+ 新建供应商</a-button>
            </a-space>
          </a-col>
        </a-row>
        <!-- 表格 -->
        <div class="table">
          <advance-table :columnsResetIsShow="false" :columns="columns" :scroll="tableData.length > 0 ? {x: true} : undefined" :data-source="tableData" title=" " :loading="loading" rowKey="id" @search="onSearch" @refresh="onRefresh" :format-conditions="true" @reset="onReset" :pagination="{
        current: page, 
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }">
            <template slot="fullName" slot-scope="text">
              <a-tooltip>
                <template slot="title">
                  {{text.text}}
                </template>
                {{text.text ? text.text : '-'}}
              </a-tooltip>
            </template>
            <template slot="type" slot-scope="text">
              {{text.text | typeFilter}}
            </template>
            <template slot="deptName" slot-scope="text">
              {{text.text ? text.text : '-'}}
            </template>
            <template slot="orgUserName" slot-scope="text">
              {{text.text ? text.text : '-'}}
            </template>

            <template slot="updateTime" slot-scope="text">
              <span>{{text.text | timestrapFilter}}</span>
            </template>
            <template slot="opera" slot-scope="text">
              <a @click="goDetailsRowClkFn(text)">详情</a>
              <a-divider type="vertical" />
              <a @click="editRowClkFn(text)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定要删除该供应商吗?" ok-text="确定" cancel-text="取消" @confirm="delectRowClkFn(text)">
                <a>删除</a>
              </a-popconfirm>
            </template>
          </advance-table>
        </div>

        <!-- 新建/编辑供应商modal -->
        <a-modal class="my_modal" :title="modalTitle + '供应商'" :visible="visible" @ok="handleOk('modalRuleForm')" @cancel="handleCancel" centered :confirm-loading="confirmLoading">
          <a-form-model class="modal_reset" ref="modalRuleForm" :rules="formRules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">

            <a-form-model-item class="labelStyle fullWidth" label="供应商名称" prop="supplierName">
              <a-input placeholder="请输入供应商名称" v-model="form.supplierName" allowClear @change="supplierIptChangeFn" />
            </a-form-model-item>

            <a-form-model-item label="类型" prop="type">
              <a-radio-group v-model="form.type" name="radioGroup" @change="radioChangeFn" :default-value="1">
                <a-radio :value="1">
                  内部
                </a-radio>
                <a-radio :value="2">
                  外部
                </a-radio>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item label="供应商主体">
              <a-input v-model="form.corpName" placeholder="请输入供应商主体" allowClear @change="corpNameOnChangeFn"></a-input>
            </a-form-model-item>

            <a-form-model-item label="所属部门" prop="depName">
              <a-select :disabled="form.type == 2" placeholder="请选择所属部门" show-search v-model="form.depName" option-filter-prop="children" :style="resetWidth" @change="depNameHandleChange" @focus="depNameFocusFn" :getPopupContainer="(triggerNode) => triggerNode.parentNode" :loading="depNameLoad">
                <a-select-option v-for="(item, index) of deptNameSelectData" :key="index" :checkdata="item">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="服务费">
              <a-input v-model="form.serveCost" placeholder="请输入服务费" allowClear suffix="元/人/月" @change="serveCostOnChangeFn"></a-input>
            </a-form-model-item>

            <a-form-model-item label="账单日" class="preSufSelect">
              <a-select v-model="form.billDate" placeholder="请选择账单日" show-search option-filter-prop="children" @change="billDateChangeFn" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
                <a-select-option v-for="(item, index) in dayMonth" :key="index" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="付款日" prop="payDay" class="preSufSelect">
              <!-- <a-date-picker v-model="form.payDay" placeholder="请选择付款日" @change="payDayOnChange" /> -->
              <!-- <iptPresuf v-model="form.payDay" :placeholderstr="'请选择付款日'" /> -->
              <a-select v-model="form.payDay" placeholder="请选择付款日" show-search option-filter-prop="children" @change="payDayChangeFn" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
                <a-select-option v-for="(item, index) in dayMonth" :key="index" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="负责员工" prop="chargeStaff">
              <a-select placeholder="请选择负责员工" v-model="form.chargeStaff" show-search option-filter-prop="children" :style="resetWidth" @change="chargeStaffHandleChange" @search="chargeStaffSearchFn" :getPopupContainer="(triggerNode) => triggerNode.parentNode" :loading="chargeStuffLoad">
                <a-select-option v-for="(item,index) of chargeStaffSelectData" :key="index" :checkdata="item">{{item.realName}} | <small>{{item.postName}}</small></a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="覆盖城市">
              <a-select mode="multiple" :style="resetWidth" v-model="form.coverCity" placeholder="请选择覆盖城市" show-search option-filter-prop="children" @change="coverCityHandleChange" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
                <a-select-option v-for="(item, index) in cityData" :key="index" :cityid="item.id">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="汇款账户卡号" prop="bankAccountCardNum">
              <a-input v-model="form.bankAccountCardNum" placeholder="请输入汇款账户卡号" allowClear @change="bankCardOnChangeFn" @blur="bankNumBlurFn"></a-input>
            </a-form-model-item>

            <a-form-model-item label="汇款账户户名">
              <a-input v-model="form.bankAccountName" placeholder="请输入汇款账户户名" allowClear @change="bankAccountNameOnChangeFn"></a-input>
            </a-form-model-item>

            <a-form-model-item label="汇款账户银行" prop="bankName">
              <a-input v-model="form.bankName" placeholder="请输入汇款账户银行" allowClear @change="bankNameOnChangeFn"></a-input>
            </a-form-model-item>

          </a-form-model>
        </a-modal>

        <!-- 详情drawer -->
        <detailDrawer :title="'详情'" @cancelDrawer="cancelDrawer" @getList="getListIvk" :visible.sync="drawerVisible">
          <div slot="content">
            <a-descriptions title="基本信息">
              <a-descriptions-item v-for="(value, key) of basicInfo" :key="key" :label="key | keyFilter">
                {{value | basciValFilter(key, value)}}
              </a-descriptions-item>
            </a-descriptions>
            <a-divider />
            <a-descriptions class="coverCity_desc" title="覆盖城市" :column="{ xs: 8, sm: 16, md: 24}">
              <a-descriptions-item v-for="(item, index) of coverCity" :key="index" label="">
                {{item.name}}
              </a-descriptions-item>
            </a-descriptions>
            <a-divider />
            <a-descriptions title="汇款账户信息">
              <a-descriptions-item v-for="(value, key) of accountInfo" :key="key" :label="key | keyFilter">
                {{value}}
              </a-descriptions-item>
            </a-descriptions>
            <a-divider />
            <a-descriptions title="创建人信息">
              <a-descriptions-item v-for="(value, key) of creatPersonInfo" :key="key" :label="key | keyFilter">
                {{value | creatPersonInfoFilter(key, value)}}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </detailDrawer>
      </div>
    </a-card>
  </page-layout>
</template>

<script>
import datas from '@/utils/data'
import detailDrawer from '@/pages/components/drawer'
import {
  supplierPageListApi,
  getAllCityApi,
  findDeptNameByNameLikeApi,
  findByNameLikeApi,
  supplierSaveApi,
  supplierRemoveApi,
  supplierUpdateApi
} from '@/services/socialSecurityFund'
import AdvanceTable from '@/components/table/advance/AdvanceTable'
import provinces from 'china-division/dist/provinces.json'
import cities from 'china-division/dist/cities.json'
import areas from 'china-division/dist/areas.json'
import { transferDate } from '@/utils/util'
import Vcity from '@/components/vcity/index'
import PageLayout from "@/layouts/PageLayout"
import { mapState, mapMutations } from 'vuex'
import { bankNumRegIvkApi } from '@/services/employeeDetail'
// import iptPresuf from '@/pages/components/preSufInput'

// var $cityArr = []

areas.forEach((area) => {
  const matchCity = cities.filter(city => city.code === area.cityCode)[0];
  if (matchCity) {
    matchCity.children = matchCity.children || [];
    matchCity.children.push({
      label: area.name,
      value: area.code,
    });
  }
});

cities.forEach((city) => {
  const matchProvince = provinces.filter(province => province.code === city.provinceCode)[0];
  if (matchProvince) {
    matchProvince.children = matchProvince.children || [];
    matchProvince.children.push({
      label: city.name,
      value: city.code,
      // children: city.children,
    });
  }
});

const options = provinces.map(province => ({
  label: province.name,
  value: province.code,
  children: province.children,
}));

export default {
  data () {
    return {
      iptform: {
        supplierName: '',
        city: undefined
      },
      columns: datas.supplierColumns,
      // tableData: datas.supplierData,
      tableData: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      visible: false,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      resetWidth: '180px',
      basicInfo: {},
      coverCity: [],
      accountInfo: {},
      creatPersonInfo: {},
      options,
      cityData: [],
      selectCityId: null,
      deptNameSelectData: [],
      chargeStaffSelectData: [],
      modalTitle: '',
      depNameLoad: false,
      chargeStuffLoad: false,
      form: {
        supplierName: '',
        depName: undefined,
        payDay: undefined,
        bankAccountCardNum: null,
        type: null,
        serveCost: '',
        chargeStaff: undefined,
        chargeStaffId: null,
        chargeStaffMobile: null,
        bankAccountName: '',
        corpName: '',
        depId: null,
        billDate: undefined,
        coverCity: undefined,
        coverCityId: [],
        bankName: '',
        rowId: null
      },
      formRules: {
        supplierName: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        depName: [
          { required: true, message: '请选择所属部门', trigger: 'change' }
        ],
        payDay: [
          { required: true, message: '请选择付款日', trigger: 'change' }
        ],
        bankAccountCardNum: [
          { required: true, message: '请输入汇款账户卡号', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        chargeStaff: [
          { required: true, message: '请选择负责员工', trigger: 'change' }
        ],
        bankAccountName: [
          { required: true, message: '请输入汇款账户户名', trigger: 'change' }
        ],
        bankName: [
          { required: true, message: '请输入汇款账户银行', trigger: 'blur' }
        ]
      },
      drawerVisible: false
    }
  },
  computed: {
    dayMonth () {
      let _value
      for (let i = 1; i <= 28; i++) {
        _value = i
      }
      return _value
    },

    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['lang']),
  },
  components: { AdvanceTable, detailDrawer, Vcity, PageLayout }, // iptPresuf
  filters: {
    keyFilter (str) {
      switch (str) {
        case 'fullName':
          return '供应商全称'
        case 'type':
          return '类型'
        case 'deptName':
          return '所属部门'
        case 'name':
          return '供应商主体'
        case 'serviceAmt':
          return '服务费'
        case 'orgUserName':
          return '负责员工'
        case 'socialBillDay':
          return '账单日'
        case 'chargeBillDay':
          return '付款日'
        case 'cardNum':
          return '汇款账户卡号'
        case 'realName':
          return '汇款账户户名'
        case 'bankName':
          return '汇款账户银行'
        case 'createBy':
          return '创建人'
        case 'createTime':
          return '创建时间'
        case 'updateTime':
          return '更新时间'
      }

    },

    typeFilter (id) {
      switch (id) {
        case 1:
          return '优蓝系'
        case 2:
          return '外部供应商'
        default:
          return '-'

      }
    },

    timestrapFilter (val) {
      return val ? transferDate(val, 0) : '-'
    },

    basciValFilter (value, key) {
      if (key == 'type') {
        if (value == 1) {
          return '优蓝系'
        } else {
          return '外部供应商'
        }
      } else {
        return value
      }
    },

    creatPersonInfoFilter (value, key) {
      if (key == 'createTime' || key == 'updateTime') {
        return transferDate(value, 0)
      } else {
        return value
      }
    }
  },
  created () {
    this.getList()
    this.getCityIvk()
  },
  methods: {
    ...mapMutations('setting', ['setShowDrawer']),

    getCityIvk () {
      getAllCityApi().then(res => {
        let { code, data, msg } = res.data
        if (code === 200) {
          this.cityData = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    getList () {
      let params = {
        name: this.iptform.supplierName,
        pageNum: this.page,
        pageSize: this.pageSize,
        cityId: this.selectCityId,
      }

      this.loading = true
      supplierPageListApi(params).then(res => {
        this.loading = false
        let { code, data, msg } = res.data
        if (code === 200) {
          this.tableData = data.content
          this.page = data.pageNum
          this.total = data.totalElements
          this.pageSize = data.pageSize
        } else {
          this.$message.error(msg)
        }
      })
    },

    displayRender ({ labels }) {
      return labels[labels.length - 1];
    },

    searchBtnClkFn () {
      this.getList()
    },

    onSearch (conditions, searchOptions) {
      this.page = 1
      this.conditions = conditions
    },

    onSizeChange (current, size) {
      this.page = 1
      this.pageSize = size
      this.getList()
    },

    onRefresh (conditions) {
      this.conditions = conditions
    },

    onReset (conditions) {
      this.conditions = conditions
    },

    onPageChange (page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      this.getList()
    },

    goDetailsRowClkFn (text) {
      let {
        name,
        type,
        deptName,
        fullName,
        serviceAmt,
        orgUserName,
        socialBillDay,
        chargeBillDay,
        cardNum,
        realName,
        bankName,
        createBy,
        createTime,
        updateTime,
        cityList
      } = text.record

      this.basicInfo = {
        fullName,
        type,
        deptName,
        name,
        serviceAmt,
        orgUserName,
        socialBillDay,
        chargeBillDay
      }

      this.coverCity = cityList

      this.accountInfo = {
        cardNum,
        realName,
        bankName
      }

      this.creatPersonInfo = {
        createBy,
        createTime,
        updateTime
      }

      // this.setShowDrawer(true)
      this.drawerVisible = true
    },

    getListIvk () {
      this.getList()
    },

    addSupplierBtnClkFn () {
      this.visible = true
      this.modalTitle = '新建'

      this.$nextTick(() => {
        this.$refs['modalRuleForm'].resetFields()
        this.form = {}
      })
    },

    handleOk (formName) {
      this.$refs[formName].validate(valid => { // modalRuleForm        
        if (valid) {
          let {
            bankAccountCardNum,
            bankAccountName,
            bankName,
            billDate,
            chargeStaff,
            chargeStaffId,
            chargeStaffMobile,
            corpName,
            coverCityId,
            depName,
            depId,
            payDay,
            serveCost,
            supplierName,
            type,
            rowId
          } = this.form

          // console.log('this.form', bankAccountCardNum,
          //   bankAccountName,
          //   bankName,
          //   billDate,
          //   chargeStaff,
          //   chargeStaffId,
          //   chargeStaffMobile,
          //   corpName,
          //   coverCityId,
          //   depName,
          //   payDay,
          //   serveCost,
          //   supplierName,
          //   type,
          //   rowId)

          let params = {  // 添加
            id: rowId,
            name: corpName,
            fullName: supplierName,
            serviceAmt: serveCost,
            socialBillDay: billDate,
            chargeBillDay: payDay,
            orgUserId: chargeStaffId,
            orgUserMobile: chargeStaffMobile,
            orgUserName: chargeStaff,
            type,
            deptName: depName,
            deptId: depId,
            bankName,
            cardNum: bankAccountCardNum,
            realName: bankAccountName,
            cityIdList: coverCityId
          }

          // if (this.modalTitle == '新建') {
          //   console.log('新建', params)
          // } else {
          //   console.log('编辑', params)
          // }

          this.confirmLoading = true
          let $api = this.modalTitle == '新建' ? supplierSaveApi : supplierUpdateApi
          $api(params).then(res => {
            this.visible = false;
            this.confirmLoading = false;
            let { code, msg } = res.data
            if (code == 200) {
              this.$message.success(msg)
              this.getList()
            } else (
              this.$message.error(msg)
            )
          })
          // 编辑 新建 传新参数orgUserId orgUserMobile orgUserName
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    handleCancel () {
      this.visible = false;
    },

    depNameHandleChange (value, option) {
      let { name, id } = option.data.attrs.checkdata
      this.form.depName = name
      this.form.depId = id
      this.$forceUpdate()
    },

    supplierIptChangeFn (e) {
      this.form.supplierName = e.target.value
      this.$forceUpdate()
    },

    payDayOnChange (date, dateString) {
      this.form.payDay = dateString
    },

    payDayChangeFn (date) {
      this.form.payDay = date
      this.$forceUpdate()
    },

    bankCardOnChangeFn (e) {
      this.form.bankAccountCardNum = e.target.value
      this.$forceUpdate()
    },

    bankNumBlurFn (e) {
      if (e.target.value) {
        bankNumRegIvkApi(e.target.value).then(res => {
          if (!res.data.validated) {
            this.$message.error('请输入正确的银行卡号!')
          }
        })
      }
    },

    radioChangeFn (e) {
      this.form.type = e.target.value // 1 内部 2 外部                  
      this.$forceUpdate()

      if (e.target.value == 2) {
        this.formRules.depName = []
      } else {
        this.formRules.depName = { required: true, message: '请选择所属部门', trigger: 'change' }
      }
    },

    serveCostOnChangeFn (e) {
      this.form.serveCost = e.target.value
    },

    chargeStaffHandleChange (value, option) {
      let { id, mobile, realName } = option.data.attrs.checkdata

      this.form.chargeStaff = realName
      this.form.chargeStaffId = id
      this.form.chargeStaffMobile = mobile
      this.$forceUpdate()
    },

    chargeStaffSearchFn (e) {
      if (e.length < 2) {
        return;
      }
      let params = {
        realName: e
      }

      this.chargeStuffLoad = true
      findByNameLikeApi(params).then(res => {
        let { code, data, msg } = res.data
        this.chargeStuffLoad = false
        if (code === 200) {
          this.chargeStaffSelectData = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    bankAccountNameOnChangeFn (e) {
      this.form.bankAccountName = e.target.value
    },

    corpNameOnChangeFn (e) {
      this.form.corpName = e.target.value
    },

    billDateChangeFn (date) {
      this.form.billDate = date
      this.$forceUpdate()
    },

    coverCityHandleChange (value, option) {

      if (this.modalTitle == '新建') {
        let _arr = []
        option.forEach(item => {
          _arr.push(String(item.data.attrs.cityid))
        })
        this.form.coverCityId = _arr
      } else {
        let _arr = []
        option.forEach(item => {
          _arr.push(String(item.data.attrs.cityid))
        })
        this.form.coverCityId = _arr
        this.$forceUpdate()
      }
    },

    bankNameOnChangeFn (e) {
      this.form.bankName = e.target.value
      this.$forceUpdate()
    },

    cancelDrawer () {
      // this.setShowDrawer(false)
      this.drawerVisible = false
    },

    selectDepCity (obj) {
      this.selectCityId = obj.id
    },

    depNameFocusFn () {
      this.depNameLoad = true
      findDeptNameByNameLikeApi().then(res => {
        this.depNameLoad = false
        let { code, data, msg } = res.data
        if (code === 200) {
          this.deptNameSelectData = data
        } else {
          this.$message.error(msg)
        }

      })
    },

    delectRowClkFn (data) {
      supplierRemoveApi(data.record.id).then(res => {
        let { code, msg } = res.data
        if (code == 200) {
          this.$message.success(msg)
          this.getList()
        } else {
          this.$message.error(msg)
        }
      })
    },

    editRowClkFn (data) {  // 编辑      
      this.visible = true
      this.modalTitle = '编辑'

      let {
        id,
        bankName, // 银行
        cardNum, // 汇款账户卡号
        chargeBillDay, // 付款日
        cityList, // 覆盖城市
        deptName, // 所属部门
        deptId,
        fullName, // 供应商名称
        name, // 公司全称
        orgUserId, // 负责员工
        orgUserName, // 负责员工name
        orgUserMobile,
        realName, // 汇款账户户名
        serviceAmt, // 服务费
        socialBillDay, // 账单日
        type, // 类型        
      } = data.record

      this.form = {
        supplierName: fullName,
        depName: deptName,
        depId: deptId,
        payDay: chargeBillDay,
        bankAccountCardNum: cardNum,
        type,
        serveCost: serviceAmt,
        chargeStaffId: orgUserId,
        chargeStaff: orgUserName,
        chargeStaffMobile: orgUserMobile,
        bankAccountName: realName,
        corpName: name,
        billDate: socialBillDay,
        rowId: id,
      }

      let _cityNameArr = []

      let _cityIdArr = []
      cityList.forEach(item => {
        _cityNameArr.push(item.name)
        _cityIdArr.push(item.id)
      })

      this.form.coverCity = _cityNameArr
      this.form.coverCityId = _cityIdArr
      this.form.bankName = bankName
      this.$nextTick(() => {
        this.$refs['modalRuleForm'].clearValidate()  // resetFields  
      })
    },
  }
}
</script>

<style lang='less' scoped>
@gray: #595959;

.align_left {
  text-align: left;
}

.align_right {
  text-align: right;
}

.dsp_flex {
  display: flex;
  display: -webkit-flex;
}

.addBtn_wrapper {
  .align_right();
}

.table {
  margin-top: 20px;
}

.modal_reset {
  .dsp_flex();
  flex-wrap: wrap;
  /deep/.ant-form-item {
    margin-bottom: 0;
    width: 33.33%;
  }
  /deep/.ant-form-item-label {
    width: 100%;
    .align_left();
  }
}

.my_modal {
  /deep/.ant-modal {
    width: 849px !important;
  }
}

.coverCity_desc {
  /deep/.ant-descriptions-row {
    .dsp_flex();
    justify-content: flex-start;
  }
  /deep/.ant-descriptions-item {
    display: inline-block;
    margin-right: 10px;
  }
}

.preSufSelect {
  .pseudo {
    display: block;
    color: @gray;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 999;
  }
  .ant-select {
    position: relative;
    &:before {
      content: "每月";
      .pseudo();
      left: 11px;
    }
    &:after {
      content: "日";
      .pseudo();
      right: 13px;
    }
  }
  /deep/.ant-select-selection__rendered {
    margin-left: 45px;
  }
  /deep/.ant-select-arrow {
    right: 30px;
  }
}
.address_tmp {
  background: #fff !important;
}
</style>
